<template>
	<view class="create">
		<scroll-view scroll-y class="viewport">
			<!-- 收货地址 -->
			<navigator v-if="selecteAddress" class="shipment" hover-class="none" url="/pagesMember/address/address?from=order">
				<view class="user">{{ selecteAddress.receiver }} {{ selecteAddress.contact }} </view>
				<view class="address"> {{ selecteAddress.fullLocation }} {{ selecteAddress.address }}  </view>
				<text class="icon icon-right"></text>
			</navigator>
			<navigator v-else class="shipment" hover-class="none" url="/pagesMember/address/address?from=order">
				<view class="address"> 请选择收货地址 </view>
				<text class="icon icon-right"></text>
			</navigator>

			<!-- 商品信息 -->
			<view class="goods">
				<navigator v-for="item in 2" :key="item" :url="`/pages/goods/goods?id=1`" class="item"
					hover-class="none">
					<image class="picture"
						src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg" />
					<view class="meta">
						<view class="name ellipsis"> ins风小碎花泡泡袖衬110-160cm </view>
						<view class="attrs">藏青小花 130</view>
						<view class="prices">
							<view class="pay-price symbol">99.00</view>
							<view class="price symbol">99.00</view>
						</view>
						<view class="count">x5</view>
					</view>
				</navigator>
			</view>

			<!-- 配送及支付方式 -->
			<view class="related">
				<view class="item">
					<text class="text">配送时间</text>
					<picker :range="deliveryList" range-key="text" @change="onChangeDelivery">
						<view class="icon-fonts picker">{{ activeDelivery.text }}</view>
					</picker>
				</view>
				<view class="item">
					<text class="text">订单备注</text>
					<input class="input" :cursor-spacing="30" placeholder="选题，建议留言前先与商家沟通确认" v-model="buyerMessage" />
				</view>
			</view>

			<!-- 支付金额 -->
			<view class="settlement">
				<view class="item">
					<text class="text">商品总价: </text>
					<text class="number symbol">495.00</text>
				</view>
				<view class="item">
					<text class="text">运费: </text>
					<text class="number symbol">5.00</text>
				</view>
			</view>
		</scroll-view>

		<!-- 吸底工具栏 -->
		<view class="toolbar" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
			<view class="total-pay symbol">
				<text class="number">99.00</text>
			</view>
			<view class="button" :class="{ disabled: !selecteAddress.id }" @tap="onOrderSubmit"> 提交订单 </view>
		</view>
	</view>
</template>

<script>
	import { getOrderPreAPI, getOrderPreNowAPI, commitOrderAPI, getMemberOrderRepurchaseByIdAPI } from '@/services/card.js'
	export default {
		data() {
			return {
				safeAreaInsets: {},
				// 订单备注
				buyerMessage: '',
				// 配送时间
				deliveryList: [{
						type: 1,
						text: '时间不限 (周一至周日)'
					},
					{
						type: 2,
						text: '工作日送 (周一至周五)'
					},
					{
						type: 3,
						text: '周末配送 (周六至周日)'
					},
				],
				// 当前配送时间下标
				activeIndex: 0,
				// 获取订单信息
				orderPre: {},
			}
		},
		computed: {
			// 当前配送时间
			activeDelivery() {
				return this.deliveryList[this.activeIndex]
			},
			// 收货地址
			selecteAddress(){
				const selectedAddress = this.$store.state.address.selectedAddress
				return selectedAddress || this.orderPre?.userAddresses?.find((v) => v.isDefault)
			},
		},
		onLoad(option) {
			// 获取屏幕边界到安全区域距离
			const { safeAreaInsets } = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			// 是否有立即购买参数
			if (option.count && option.skuId) {
			    // 调用立即购买API
				this.getOrderPreNowInfo(option.count , option.skuId)
			  } else {
			    // 调用预付订单API
				this.getOrderPreInfo()
			  }
			// 是否有再次购买参数
			if(option.orderId){
				this.getRepurchaseById(option.orderId)
			}
		},
		methods: {
			// 提交订单
			 async onOrderSubmit(){
				// 没有收货地址提醒
				if (!this.selecteAddress?.id) {
					return uni.showToast({ icon: 'none', title: '请选择收货地址' })
				}
				// 发送请求
				const res = await commitOrderAPI({
					addressId: this.selecteAddress?.id,
					buyerMessage: this.buyerMessage,
					deliveryTimeType: this.activeDelivery.type,
					goods: this.orderPre.goods.map((v) => ({ count: v.count, skuId: v.skuId })),
					payChannel: 2,
					payType: 1,
				})
				// 关闭当前页面，跳转到订单详情，传递订单id
				uni.redirectTo({ url: `/pagesOrder/detail/detail?id=${res.result.id}` })
			},
			// orderId是否再次购买
			async getRepurchaseById(orderId){
				let res = await getMemberOrderRepurchaseByIdAPI(orderId)
				this.orderPre = res.result
			},
			// 获取立即购买订单信息
			async getOrderPreNowInfo(count, skuId){
				let res = await getOrderPreNowAPI({count, skuId})
				this.orderPre = res.result
			},
			// 获取预付订单信息
			getOrderPreInfo(){
				getOrderPreAPI().then(res => {
					if(res?.code == '1'){
						this.orderPre = res.result
					}
				})
			},
			onChangeDelivery(ev) {
				this.activeIndex = ev.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		background-color: #f4f4f4;
	}

	.symbol::before {
		content: '¥';
		font-size: 80%;
		margin-right: 5rpx;
	}

	.shipment {
		margin: 20rpx;
		padding: 30rpx 30rpx 30rpx 84rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png) 20rpx center / 50rpx no-repeat #fff;
		position: relative;

		.icon {
			font-size: 36rpx;
			color: #333;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			right: 20rpx;
		}

		.user {
			color: #333;
			margin-bottom: 5rpx;
		}

		.address {
			color: #666;
		}
	}

	.goods {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			padding: 30rpx 0;
			border-top: 1rpx solid #eee;

			&:first-child {
				border-top: none;
			}

			.picture {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrs {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.prices {
				display: flex;
				align-items: baseline;
				margin-top: 6rpx;
				font-size: 28rpx;

				.pay-price {
					margin-right: 10rpx;
					color: #cf4444;
				}

				.price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.count {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 26rpx;
				color: #444;
			}
		}
	}

	.related {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.input {
			flex: 1;
			text-align: right;
			margin: 20rpx 0;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #999;
		}

		.item .text {
			width: 125rpx;
		}

		.picker {
			color: #666;
		}

		.picker::after {
			content: '\e6c2';
		}
	}

	/* 结算清单 */
	.settlement {
		margin: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			font-size: 26rpx;
			color: #333;
		}

		.danger {
			color: #cf4444;
		}
	}

	/* 吸底工具栏 */
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		background-color: #fff;
		height: 100rpx;
		padding: 0 20rpx;
		border-top: 1rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: content-box;

		.total-pay {
			font-size: 40rpx;
			color: #cf4444;

			.decimal {
				font-size: 75%;
			}
		}

		.button {
			width: 220rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 72rpx;
			background-color: #27ba9b;
		}

		.disabled {
			opacity: 0.6;
		}
	}
</style>